<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="名称" prop="ipaddress">
        <el-input v-model="queryParams.where.name"
                  placeholder="请输入名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="访问地址" prop="loactionAilas">
        <el-input
          v-model="queryParams.loactionAilas"
          placeholder="访问地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="端口" prop="status">
        <el-select v-model="queryParams.status" placeholder="请输入端口" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="margin_bottom_8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:post:add']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:post:edit']"
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:post:remove']"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:post:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col> -->
    </el-row>

    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="IP地址" align="center" prop="ipaddress" :show-overflow-tooltip="true" />
      <!-- <el-table-column label="用户名" align="center" prop="username" :show-overflow-tooltip="true" />
      <el-table-column label="密码" align="center" prop="password" :show-overflow-tooltip="true" /> -->
      <el-table-column label="端口" align="center" width="50px" prop="port" />
      <el-table-column label="访问地址" align="center" prop="url" :show-overflow-tooltip="true" />
      <el-table-column label="访问协议" align="center" prop="agreement" />
      <el-table-column label="属于分组" align="center" prop="group" :formatter="row=>(row.group||{}).groupname" />
      <el-table-column label="类型" align="center" prop="type" :formatter="row=>typeArr[row.type]" />
      <el-table-column label="位置描述" align="center" prop="loactionAilas" />
      <el-table-column label="是否显示" align="center" prop="isShow" />
      <el-table-column label="像素" align="center" prop="pixel" />
      <el-table-column label="型号" align="center" prop="model" />
      <el-table-column label="厂家" align="center" prop="factory" />
      <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- <el-dropdown trigger="click" @command="handleCommand($event,scope.row)">
            <el-link class="el-dropdown-link" type="primary" :underline="false">点击</el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="0">修改</el-dropdown-item>
              <el-dropdown-item :command="1">删除</el-dropdown-item>
              <el-dropdown-item :command="2" divided>测试</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <el-button
            v-hasPermi="['system:post:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            v-hasPermi="['system:post:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          <el-button
            v-hasPermi="['system:post:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleTest"
          >测试</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改点位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" @closed="videoVisible = false">
      <template v-if="!videoVisible">
        <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="80px">
          <el-form-item label="点位名称" prop="name" required>
            <el-input v-model="form.name" placeholder="点位名称" />
          </el-form-item>
          <el-form-item label="IP地址" prop="ipaddress" required>
            <el-input v-model="form.ipaddress" placeholder="IP地址" />
          </el-form-item>
          <el-form-item label="用户名" prop="username" required>
            <el-input v-model="form.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="password" required>
            <el-input v-model="form.password" placeholder="密码" />
          </el-form-item>
          <el-form-item label="端口" prop="port" required>
            <el-input-number v-model="form.port" style="width:185px" placeholder="端口" />
          </el-form-item>
          <el-form-item label="访问地址" prop="url">
            <el-input v-model="form.url" placeholder="访问地址" />
          </el-form-item>
          <el-form-item label="访问协议" prop="agreement" required>
            <!-- <el-input v-model="form.agreement" placeholder="访问协议" /> -->
            <el-radio-group v-model="form.agreement" style="width:185px">
              <el-radio v-for="item in agreementArr" :key="item" :label="item">{{ item }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="类型" prop="subType" required>
            <!-- <el-input-number v-model="form.type" style="width:185px" placeholder="类型" /> -->
            <!-- <el-radio-group v-model="form.agreement" style="width:185px">
              <el-radio v-for="(item,index) in typeArr" :key="item" :label="index">{{ item }}</el-radio>
            </el-radio-group> -->
            <el-select v-model="form.subType" placeholder="请选择" style="width:185px">
              <el-option v-for="(item,index) in typeArr" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="位置描述" prop="loactionAilas" required>
            <el-input-number v-model="form.loactionAilas" style="width:185px" placeholder="位置描述" />
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="form.isShow" style="width:185px" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="属于分组" prop="group" required>
            <treeselect v-model="form.group" style="width:185px" :options="deptOptions" :normalizer="normalizer" placeholder="选择分组" />
          </el-form-item>
          <el-form-item label="像素" prop="pixel">
            <el-input v-model="form.pixel" placeholder="像素" />
          </el-form-item>
          <el-form-item label="型号" prop="model">
            <el-input v-model="form.model" placeholder="型号" />
          </el-form-item>
          <el-form-item label="厂家" prop="factory">
            <el-input v-model="form.factory" placeholder="厂家" />
          </el-form-item>
          <el-form-item label="高度" prop="height">
            <el-input v-model="form.height" placeholder="高度" />
          </el-form-item>
          <el-form-item label="X轴角度" prop="pitch">
            <el-input v-model="form.pitch" placeholder="X轴角度" />
          </el-form-item>
          <el-form-item label="Y轴角度" prop="yaw">
            <el-input v-model="form.yaw" placeholder="Y轴角度" />
          </el-form-item>
          <el-form-item label="Z轴角度" prop="roll">
            <el-input v-model="form.roll" placeholder="Z轴角度" />
          </el-form-item>
          <el-form-item label="视域角度" prop="viewAngel">
            <el-input v-model="form.viewAngel" placeholder="X轴角度" />
          </el-form-item>
          <el-form-item label="场景位置" prop="loacttion">
            <el-input v-model="form.loacttion" placeholder="三维场景位置" />
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
      <video-player v-else ref="videoPlayer" class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions" />
    </el-dialog>

  </div>
</template>

<script>
import { queryList, getById, deleteById, addUpdateItem } from '@/api/setting/camera'
import Treeselect from '@riophae/vue-treeselect'
import { queryListAll as queryListInGroup } from '@/api/setting/group'
import { typeArr, agreementArr } from '@/const'
export default {
  name: 'Place',
  components: { Treeselect },
  data() {
    return {
      agreementArr,
      typeArr,
      // 分组树选项
      deptOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 点位表格数据
      postList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        where: {}
      },
      // 表单参数
      form: { agreement: 'RTSP' },
      // 表单校验
      rules: {
        ipaddress: [
          { required: true, message: 'Ip地址不能为空', trigger: 'blur' }
        ]
        // loactionAilas: [
        //   { required: true, message: '点位编码不能为空', trigger: 'blur' }
        // ],
        // postSort: [
        //   { required: true, message: '点位顺序不能为空', trigger: 'blur' }
        // ]
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm' // url地址
        }],
        poster: '../../static/images/test.jpg', // 你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      videoVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.groupname,
        children: node.children
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      queryListInGroup().then(response => {
        this.deptOptions = this.handleTree(response.data, 'id', 'pid')
      })
    },
    /** 查询点位列表 */
    getList() {
      this.loading = true
      queryList(this.queryParams).then(response => {
        this.postList = response.data
        this.total = response.total
        this.loading = false
      })
    },
    // 点位状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        // id: undefined,
        // ipaddress: undefined,
        // ipaddress: undefined,
        // postSort: 0,
        // status: '0',
        // remark: undefined
        agreement: 'RTSP'
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.where = {}
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.getTreeselect()
      this.open = true
      this.title = '添加点位'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.getTreeselect()
      const id = row.id || this.ids
      getById(id).then(response => {
        const { group, ...data } = response.data
        this.form = data
        this.form.group = group.id
        this.open = true
        this.title = '修改点位'
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const formData = JSON.parse(JSON.stringify(this.form))
          addUpdateItem({ ...formData, group: { id: formData.group }}).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.form.id ? '修改成功' : '添加成功')
              this.open = false
              this.getList()
            } else {
              this.msgError(response.msg)
            }
          })
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm('是否确认删除数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return deleteById(ids)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      }).catch(function() {})
    },
    /** 导出按钮操作 */
    handleExport() {
      // const queryParams = this.queryParams
      this.$confirm('是否确认导出所有点位数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        // return exportPlace(queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {})
    },
    handleTest() {
      this.open = true
      this.videoVisible = true
      this.title = '测试摄像头'
    },
    handleCommand(command, row) {
      const handleArr = [this.handleUpdate, this.handleDelete, this.handleTest]
      handleArr[command](row)
    }
  }
}
</script>
